<%--
  Created by IntelliJ IDEA.
  User: 斋藤飞鸟の翼
  Date: 2020/11/10
  Time: 13:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
          media="screen" />

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 10th November 2020), see www.w3.org" />
    <title>PetHub</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />

</head>

<body>

<div id="Header">
    <div id="Logo">
        <div id="LogoContent">
            <a href="main" class="mainLogo"><img src="images/logo-topbar.gif" alt="logo-TopBar"/></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="viewCart"><img align="middle" name="img_cart" src="images/cart.gif" alt = "cartGif"/></a> <img align="middle" src="images/separator.gif" alt = "separatorGif"/>
            <a href="signin">Sign In</a> <img align="middle" src="images/separator.gif" alt = "separatorGif"/>
            <a href="signout">Sign Out</a> <img align="middle" src="images/separator.gif" alt = "separatorGif"/>
            <a href="edit">My Account</a> <img align="middle" src="images/separator.gif" alt = "separatorGif"/>
            <a href="help.html">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <form action="search" method="post">
                <input type="text" name="keyword" size="14" onkeyup="searchWord(this)" id="search1"/> <input type="submit"
                                                                      name="searchProducts" value="Search" />
            </form>
            <div id="showDiv1" style="display: block; position: absolute; z-index: 1000; top: 50px; right: 218px; background: white; width: 158px; font-size: 16px; color: black; border: 1px solid rgb(204, 205, 204);">
            </div>
            <script type="text/javascript" src="JS/jquery-3.5.1.js"></script>
            <script type="text/javascript">

                function overFn(obj){//鼠标在上面
                    $(obj).css("background","#f0f8ff");
                }
                function outFn(obj){//鼠标离开
                    $(obj).css("background","white");
                }
                function clickFn(obj){//鼠标点击
                    $("#search1").val($(obj).html());
                    $("#showDiv1").css("display","none");
                }
                //上面的是提示框的css代码，下面的是ajax获取代码
                function searchWord(obj){
                    //1、获得输入框的输入的内容
                    const word = $(obj).val();
                    //2、根据输入框的内容去数据库中模糊查询---List<Product>
                    let content = "";
                    $.post(
                        "findAjax",
                        {"word":word},
                        function(data){
                            //3、将返回的商品的名称 现在showDiv中
                            if(data.length>0){
                                for(let i=0; i<data.length; i++){
                                    content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
                                }
                                $("#showDiv1").html(content);
                                $("#showDiv1").css("display","block");
                            }
                            if(obj.value.length===0){//判断输入框是否为空，如果为空则隐藏提示区域
                                $("#showDiv1").css("display","none");
                            }
                        },
                        "json"
                    );
                }
            </script>
        </div>
    </div>


    <div id="QuickLinks">
        <a href="category?categoryId=FISH">Fish</a> <img src="images/separator.gif" alt = "separatorGif"/>
        <a href="category?categoryId=DOGS">Dog</a> <img src="images/separator.gif" />
        <a href="category?categoryId=REPTILES">Reptile</a> <img src="images/separator.gif" alt = "separatorGif"/>
        <a href="category?categoryId=CATS">Cat</a> <img src="images/separator.gif" alt = "separatorGif"/>
        <a href="category?categoryId=BIRDS">Bird</a>
    </div>

</div>

<div id="Content">
    <p></p><p></p><p></p>
    <%-------------------------------------------------------------------------------------------------%>

